<template>
    <div id="LoginSuccess_box">
        <!-- LoginSuccess_box_header -->
        <div id="LoginSuccess_box_header">
            <router-link to="/" ><img src="static/imgs/arrowleft.png" alt=""></router-link>
            <p id="LoginSuccess_box_header_span">我的</p>
        </div>

        <!-- 个人介绍 -->
        <div id="LoginSuccess_box_self">
                <div class="LoginSuccess_box_bg"></div>
                <div class="LoginSuccess_box_info"></div>
                <p class="LoginSuccess_box_name">tomhs3000</p>
                <p class="LoginSuccess_box_js">个人介绍：</p>
        </div>
        <!-- 列表 -->
        <div class="list">
            <div class="LoginSuccess_box_item">
                <router-link to="Shoucang">
                    <div class="LoginSuccess_box_title">
                        我的收藏
                    </div>
                </router-link>
                <a class=""><i class=""></i></a>
            </div>
            <a href="">
                <div class="LoginSuccess_box_item">
                    <div class="">
                        商城兑换
                    </div>
                    <span class=""><i class=""></i></span>
                </div>
            </a>
            <a href="" id="">
                <div class="LoginSuccess_box_item">
                    <div class="">
                        收货地址
                    </div>
                    <span class=""><i class=""></i></span>
                </div>
            </a>
            <a id="loginout">
                <div class="LoginSuccess_box_loginout LoginSuccess_box_item"  @click="loginOut('changeLoginstate')">
                    <div class="">
                        退出登陆
                    </div>
                </div>
            </a>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    methods: {
        loginOut(methodsname){
            this.$store.commit(methodsname);
            // localStorage.setItem("flag","false");
            this.$router.push({
                path: '/'
            })
        }
    }
}
</script>

<style>
    #LoginSuccess_box_header{
        height: .85rem;
        width: 100%;
        background: #fff;
    }
    #LoginSuccess_box{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background: #e6e6e6;
    }
    #LoginSuccess_box img{
        margin: .25rem 0 0 .2rem;
        width: .3rem;
    }
    #LoginSuccess_box_header_span{
        display: inline-block;
        font-size: .32rem;
        margin: 0 0 0 2.5rem;
    }
    #LoginSuccess_box_self{
        width:100%;
        height: 4.6rem;
        background:url("http://pub.szzhangchu.com/web/v4.2/images/top_bg.jpg");
        background-size: cover;
        position: relative;
    }
    .LoginSuccess_box_bg{
        background: url("http://pub.szzhangchu.com/web/v4.2/images/img-empty.gif");
        background-size: cover;
        width: 1rem;
        height: 1rem;
        position: absolute;
        bottom: 1rem;
        left: .6rem;
        border-radius: 1rem;
        z-index: 999;

    }

    .LoginSuccess_box_info{
        background: black;
        opacity: .5;
        width: 100%;
        height: 1.5rem;
        position: absolute;
        bottom: 0;

    }
    .LoginSuccess_box_info{
        font-size: 0.65rem;
        line-height:0.9rem;
        height:1.8rem;
    }
    .LoginSuccess_box_name{
        color: #fff;
        font-size: .4rem;
        position: absolute;
        bottom: 1rem;
        left: 1.8rem;
    }
    .LoginSuccess_box_js{
        color: #fff;
        font-size: .3rem;
        position: absolute;
        bottom: .4rem;
        left: .7rem;
    }
    .LoginSuccess_box_item{
        background: #fff;
        width: 100%;
        height: .9rem;
        line-height: .9rem;
        text-align: left;
        font-size: .3rem;
        padding-left: .4rem;
        margin: .2rem 0;
    }
    #loginout .LoginSuccess_box_item{
        text-align: center;
    }
    #loginout .LoginSuccess_box_item a{
        color: #ff8f5c;

    }
</style>
